<!-- 
文件名称: operation_log.html
完整存储路径: frontend/templates/operation_log.html
功能说明: 
    操作日志页面，展示系统操作日志列表。页面风格与用户管理完全一致。
    支持查看日志详情和恢复操作。
使用说明:
    通过AJAX请求从后端API获取日志数据并展示。
    后端接口需要提供相应的API支持。
-->

{% extends "layouts/base.html" %}
{% block title %}操作日志 - 近视预防干预系统{% endblock %}
{% block content %}
<main class="main-content-container">
  <div class="user-management-content">
    <h1>操作日志</h1>
    
    <!-- 筛选条件 -->
    <div class="filter-section mb-3">
      <div class="row">
        <div class="col-md-2">
          <select id="actionFilter" class="form-control">
            <option value="">所有操作类型</option>
            <option value="CREATE">创建</option>
            <option value="UPDATE">更新</option>
            <option value="DELETE">删除</option>
            <option value="RESTORE">恢复</option>
          </select>
        </div>
        <div class="col-md-2">
          <input type="date" id="startDate" class="form-control" placeholder="开始日期">
        </div>
        <div class="col-md-2">
          <input type="date" id="endDate" class="form-control" placeholder="结束日期">
        </div>
        <div class="col-md-2">
          <button id="filterBtn" class="btn btn-primary">筛选</button>
          <button id="resetFilterBtn" class="btn btn-secondary">重置</button>
        </div>
      </div>
    </div>
    
    <table class="table user-table">
      <thead>
        <tr>
          <th>操作用户</th>
          <th>操作类型</th>
          <th>操作内容</th>
          <th>操作时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="logList"></tbody>
    </table>
    
    <!-- 分页控件 -->
    <div id="pagination" class="d-flex justify-content-between align-items-center mt-3">
      <div class="pagination-info">
        显示 <span id="startRecord">0</span> 到 <span id="endRecord">0</span> 条，共 <span id="totalRecords">0</span> 条记录
      </div>
      <div class="pagination-controls">
        <button id="prevPage" class="btn btn-sm btn-outline-primary">上一页</button>
        <span id="currentPage" class="mx-2">第 1 页</span>
        <button id="nextPage" class="btn btn-sm btn-outline-primary">下一页</button>
      </div>
    </div>
  </div>
</main>

<!-- 日志详情模态框 -->
<div id="logDetailModal" class="modal" style="display: none">
  <div class="modal-content">
    <div class="modal-header">
      <h2>日志详情</h2>
      <span class="close">&times;</span>
    </div>
    <div class="modal-body">
      <div id="logDetailContent"></div>
      <div id="restoreButtonContainer" class="mt-3"></div>
    </div>
  </div>
</div>
{% endblock %}
{% block styles %} {{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/user_management.css') }}" />
<style>
.filter-section {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.pagination-info {
  color: #6c757d;
  font-size: 14px;
}

.pagination-controls {
  display: flex;
  align-items: center;
}

.log-action-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.log-action-CREATE {
  background-color: #d4edda;
  color: #155724;
}

.log-action-UPDATE {
  background-color: #fff3cd;
  color: #856404;
}

.log-action-DELETE {
  background-color: #f8d7da;
  color: #721c24;
}

.log-action-RESTORE {
  background-color: #d1ecf1;
  color: #0c5460;
}
</style>
{% endblock %}
{% block scripts %} {{ super() }}
<script src="{{ url_for('static', filename='js/operation_log.js') }}"></script>
{% endblock %}
